<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>心形气泡</title>
    <style>
        html,
        body {
            border: none;
            overflow: hidden;
            height: 100%;
        }

        body {
            background: url(img/bg.jpg);
            background-size: 100% 100%;
        }

        div {
            background-size: 100% 100%;
        }

        @keyframes flicker {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
    <script src="js/Bubbles.js"></script>
    <script>
        /**
         * 全屏切换
         * @param {Object} elem
         */
        function toggleFS(elem) {
            var tag = Boolean(elem.getAttribute('tag') == 'true');
            (!tag ? rfs : efs)();
            elem.setAttribute('tag', tag ? false : true);
        }

        //进入全屏
        function rfs() {
            var de = document.documentElement;
            if (de.requestFullscreen)
                de.requestFullscreen();
            if (de.mozRequestFullScreen)
                de.mozRequestFullScreen();
            if (de.webkitRequestFullScreen)
                de.webkitRequestFullScreen();
        };

        //退出全屏
        function efs() {
            var d = document;
            if (d.exitFullscreen)
                d.exitFullscreen();
            if (d.mozCancelFullScreen)
                d.mozCancelFullScreen();
            if (d.webkitCancelFullScreen)
                d.webkitCancelFullScreen();
        };
    </script>
</head>

<body onload="bubbleFun(10)" ondblclick="toggleFS(this)">
	<div>
		<a></a>
	</div>
</body>

</html>